<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="开发环境" name="first" disabled>
        目前开发和镜像都是测试环境, 这里只是留个坑...用镜像环境的token即可...
      </el-tab-pane>
      <el-tab-pane label="镜像环境" name="mirror">
        <el-table :data="list" border fit highlight-current-row stripe>
          <el-table-column type="index">
          </el-table-column>
          <el-table-column label="用户名" width="100px">
            <template slot-scope="{ row }">
              {{ row.username }}
            </template>
          </el-table-column>
          <el-table-column label="appId" width="100px">
            <template slot-scope="{ row }">
              <span @click="copy(row.appid)">{{ row.appid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Refresh Token" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span @click="copy(row.refreshtoken)">{{ row.refreshtoken }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Access Token" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span @click="copy(row.access_token)">{{ row.access_token }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Scope" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span @click="copy(row.scope)">{{ row.scope }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="{ row }" show-overflow-tooltip>
              <el-button type="success" size="small" icon="el-icon-check" @click="getToken(row, 'mirror')">执行
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="生产环境" name="prod">
        <el-table :data="list" border fit highlight-current-row stripe>
          <el-table-column type="index">
          </el-table-column>
          <el-table-column label="用户名" width="100px">
            <template slot-scope="{ row }">
              {{ row.username }}
            </template>
          </el-table-column>
          <el-table-column label="appId" width="100px">
            <template slot-scope="{ row }">
              <span @click="copy(row.appid)">{{ row.appid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Refresh Token" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span
                @click="copy(row.refreshtoken)">{{ row.refreshtoken }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Access Token" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span @click="copy(row.access_token)">{{ row.access_token }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Scope" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span @click="copy(row.scope)">{{ row.scope }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="{ row }" show-overflow-tooltip>
              <el-button type="success" size="small" icon="el-icon-check" @click="getToken(row, 'prod')">执行</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      activeName: 'mirror',
      listQuery: {
        id: undefined
      },
      list: []
    }
  },
  created() {
    this.getUserList(this.activeName)
  },
  methods: {
    async getUserList(env = 'mirror') {
      this.list = [] // 清除上一次的数据
      const users = await request({
        url: `/token/user/list`,
        method: 'get',
        params: { env }
      })
      for (const user of users) {
        this.list.push(Object.assign(user, { access_token: '', scope: '' }))
      }
    },
    handleClick(tab) {
      this.getUserList(tab.name)
    },
    copy(rt) {
      this.$copyText(rt).then(e => {
        this.$notify({
          title: '成功',
          message: '复制成功!',
          type: 'success'
        })
      }, e => {
        this.$notify.error({
          title: '失败',
          message: '复制RT失败!'
        })
      })
    },
    getToken(row, env) {
      console.log(`开始获取用户级token: appId: ${row.appid}, secret: ${row.appsecret}, refreshtoken: ${row.refreshtoken}`)
      this.listQuery.id = row.id
      request({
        url: `/token/user`,
        method: 'get',
        params: Object.assign(this.listQuery, { env })
      }).then(resp => {
        console.log('===================================')
        row = Object.assign(row, resp)
        console.log(resp)
        console.log('===================================')
      })
    }
  }
}
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
